﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>

    <title>编辑模板</title>
    <link href="/assets/plugins/hiprint/css/hiprint.css" rel="stylesheet"/>
    <link href="/assets/plugins/hiprint/css/print-lock.css" rel="stylesheet"/>

    <link href="/assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet"/>
    <script src="/assets/plugins/jquery/jquery-1.10.2.min.js"></script>

    <!--[if lt IE 9]>
    <script src="/assets/plugins/bootstrap/html5shiv.min.js"></script>
    <script src="/assets/plugins/bootstrap/respond.min.js"></script>
    <![endif]-->
    <script>
        function request(d) {
            for (var c = location.search.slice(1).split("&"), a = 0; a < c.length; a++) {
                var b = c[a].split("=");
                if (b[0] == d) if ("undefined" == unescape(b[1])) break; else return unescape(b[1])
            }
            return ""
        };
    </script>
</head>
<body>
<layout class="layout hinnn-layout hinnn-layout-has-sider height-100-per" style="background:#fff;">

    <content class="hinnn-layout-content" style="border-left:1px solid #e8e8e8;float:left">
        <div class="container-fluid height-100-per print-content">
            <div class="row">
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-sm-3 col-md-2" style="padding-right:0px;">

                            <div class="rect-printElement-types hiprintEpContainer">
                                <ul class="hiprint-printElement-type">

                                    <li>
                                        <span class="title"><code>拖拽列表</code></span>
                                        <ul>
                                            <li>
                                                <a class="ep-draggable-item" tid="testModule.text" style="">
                                                    <span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
                                                    <span class="glyphicon-class">文本</span>
                                                </a>
                                            </li>

                                            <li>
                                                <a class="ep-draggable-item" tid="testModule.image" style="">
                                                    <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
                                                    <span class="glyphicon-class">图片</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a class="ep-draggable-item" tid="testModule.longText">
                                                    <span class="glyphicon glyphicon-subscript" aria-hidden="true"></span>
                                                    <span class="glyphicon-class">长文</span>
                                                </a>
                                            </li>

                                            <li>
                                                <a class="ep-draggable-item" tid="testModule.tableCustom" style="">
                                                    <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                                                    <span class="glyphicon-class">表格</span>
                                                </a>
                                            </li>

                                            <li>
                                                <a class="ep-draggable-item" tid="testModule.html">
                                                    <span class="glyphicon glyphicon-header" aria-hidden="true"></span>
                                                    <span class="glyphicon-class">html</span>
                                                </a>
                                            </li>

                                        </ul>
                                    </li>
                                    <li>
                                        <span class="title">辅助</span>
                                        <ul>
                                            <li>
                                                <a class="ep-draggable-item" tid="testModule.hline" style="">

                                                    <span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span>
                                                    <span class="glyphicon-class">横线</span>
                                                </a>
                                            </li>

                                            <li>
                                                <a class="ep-draggable-item" tid="testModule.vline" style="">
                                                    <span class="glyphicon glyphicon-resize-vertical" aria-hidden="true"></span>
                                                    <span class="glyphicon-class">竖线</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a class="ep-draggable-item" tid="testModule.rect">
                                                    <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span>
                                                    <span class="glyphicon-class">矩形</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a class="ep-draggable-item" tid="testModule.oval">
                                                    <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                                                    <span class="glyphicon-class">椭圆</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>

                        </div>
                        <div class="col-sm-9 col-md-10">
                            <div class="hiprint-toolbar" style="margin-top:15px;">
                                <ul>
                                    <li><a class="hiprint-toolbar-item" onclick="setPaper('A3')">A3</a></li>
                                    <li><a class="hiprint-toolbar-item" onclick="setPaper('A4')">A4</a></li>
                                    <li><a class="hiprint-toolbar-item" onclick="setPaper('A5')">A5</a></li>
                                    <li><a class="hiprint-toolbar-item" onclick="setPaper('B3')">B3</a></li>
                                    <li><a class="hiprint-toolbar-item" onclick="setPaper('B4')">B4</a></li>
                                    <li><a class="hiprint-toolbar-item" onclick="setPaper('B5')">B5</a></li>

                                    <li><a class="hiprint-toolbar-item"><input type="text" id="customWidth" style="width: 50px;height: 19px;border: 0px;" placeholder="宽/mm"/></a></li>
                                    <li><a class="hiprint-toolbar-item"><input type="text" id="customHeight" style="width: 50px;height: 19px;border: 0px;" placeholder="高/mm"/></a></li>

                                    <li><a class="hiprint-toolbar-item" onclick="setPaper($('#customWidth').val(),$('#customHeight').val())">自定义</a></li>
                                    <li><a class="hiprint-toolbar-item" onclick="rotatePaper()">旋转</a></li>
                                    <li><a class="hiprint-toolbar-item" onclick="clearTemplate()">清空</a></li>

                                    <li><a class="btn hiprint-toolbar-item " style="color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;" id="A4_preview">快速预览</a></li>
                                    <li><a id="A4_directPrint" class="btn hiprint-toolbar-item " style="color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;">打印</a></li>

                                </ul>
                                <div style="clear:both;"></div>
                            </div>
                            <div id="hiprint-printTemplate" class="hiprint-printTemplate" style="margin-top:20px;">

                            </div>
                            <div style="padding-top:15px;">
                                <button type="button" class="btn btn-primary" id="A4_getJson_toTextarea">
                                    生成json到textarea
                                </button>
                            </div>
                            <div class="hinnn-callout hinnn-callout-danger">
                                <p>
                                    <code>可视化</code>结果以Json的形式存在，用户可以<code>编辑Json</code>实现特殊化操作，如：数据<code>formatter</code>，<code>文本变色</code>,单元格<code>改变背景</code>等。具体请参考文档。
                                </p>
                            </div>
                            <textarea class="form-control" rows="10" id="A4_textarea_json"></textarea>

                        </div>
                    </div>
                </div>
            </div>

        </div>

    </content>

    <sider class="hinnn-layout-sider" style="float:right">
        <div class="container height-100-per" style="width:250px;">
            <div class="row">
                <div class="col-sm-12">
                    <div id="PrintElementOptionSetting" style="margin-top:10px;"></div>
                </div>
            </div>
        </div>
    </sider>
</layout>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document" style="width: 866px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">打印预览</h4>
            </div>

            <div class="modal-body">
                <button type="button" class="btn btn-danger" id="A4_printByHtml">打印</button>
                <div class="prevViewDiv"></div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

            </div>
        </div>
    </div>
</div>

<script src="form.js"></script>


<!--[[ 测试专用  单独使用无需引入  -->
<script src="/assets/plugins/hiprint/custom_test/custom-etype-provider.js"></script>
<script src="/assets/plugins/hiprint/custom_test/custom-print-json.js"></script>
<script src="/assets/plugins/hiprint/custom_test/print-data.js"></script>
<!--测试专用  单独使用无需引入 ]]  -->
<!--单独使用无需引入  -->
<script src="/assets/plugins/hiprint/polyfill.min.js"></script>
<script src="/assets/plugins/hiprint/plugins/jquery.minicolors.min.js"></script>
<script src="/assets/plugins/hiprint/plugins/JsBarcode.all.min.js"></script>
<script src="/assets/plugins/hiprint/plugins/qrcode.js"></script>
<script src="/assets/plugins/hiprint/hiprint.bundle.js"></script>
<script src="/assets/plugins/hiprint/plugins/jquery.hiwprint.js"></script>
<script src="/assets/plugins/bootstrap/bootstrap.min.js"></script>

<script src="/module/config.js"></script>
<script src="/module/script/lr-form.js"></script>

<script>
    var hiprintTemplate;
    $(document).ready(function () {

        if (!!window.bootstrap) {
            bootstrap(jQuery, top.learun);
        }

        //初始化打印插件
        hiprint.init({
            providers: [new customElementTypeProvider()]
        });

        //hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'testModule');
        //设置左侧拖拽事件
        hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));

        // if(!!keyValue) {
        $.ajax({
            url: config.base_server() + 'printTempletes/findById?id=' + keyValue + '&access_token=' + config.getToken().access_token,
            type: "get",
            dataType: "json",
            async: false,
            success: function (result) {
                if (result != null) {
                    hiprintTemplate = new hiprint.PrintTemplate({
                        template: JSON.parse(result.data.templete),
                        settingContainer: '#PrintElementOptionSetting',
                        paginationContainer: '.hiprint-printPagination'
                    });

                    //打印设计
                    hiprintTemplate.design('#hiprint-printTemplate');
                    if (result.data.templeteBg) {

                        $(".hiprint-printPaper.design").css({
                            "background-image": "url(" + result.data.templeteBg + ")",
                            "background-repeat": "no-repeat"
                        })
                    } else {
                            hiprintTemplate = new hiprint.PrintTemplate({
                                template: "",
                                settingContainer: '#PrintElementOptionSetting',
                                paginationContainer: '.hiprint-printPagination'
                            });
                        //打印设计
                        hiprintTemplate.design('#hiprint-printTemplate');
                    }
                }
            }
        });



        $('#A4_preview').click(function () {
            $('#myModal .modal-body .prevViewDiv').html(hiprintTemplate.getHtml(printData))
            $('#myModal').modal('show')
        });
        $('#A4_directPrint').click(function () {
            hiprintTemplate.print(printData);
        });
        $('#A4_printByHtml').click(function () {
            hiprintTemplate.printByHtml($('#myModal .modal-body .prevViewDiv'));
        })
        $('#A4_getJson_toTextarea').click(function () {
            $('#A4_textarea_json').html(JSON.stringify(hiprintTemplate.getJson()))
        })
    });

    //调整
    var setPaper = function (paperTypeOrWidth, height) {
        hiprintTemplate.setPaper(paperTypeOrWidth, height);
    }

    //旋转
    var rotatePaper = function () {
        hiprintTemplate.rotatePaper();
    }
    var clearTemplate = function () {
        hiprintTemplate.clear();
    }
</script>

</body>
</html>